<template>
  <!-- 头部搜索区域 -->
  <el-form :model="userForm" inline>
    <el-form-item label="用户名：">
      <el-input
        v-model="userForm.userName"
        placeholder="请输入用户名"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button :icon="Search" type="primary" @click="search">搜索</el-button>
      <el-button :icon="Plus" type="success" @click="addUser">新增</el-button>
      <el-button :icon="Delete" type="danger" @click="multipleDel"
        >删除</el-button
      >
    </el-form-item>
  </el-form>
  <!-- 表格区域 -->
  <el-table
    :data="tableData"
    ref="multipleTableRef"
    style="width: 100%; height: 600px; margin-top: 20px"
    border
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="username" label="用户名" width="180" />
    <el-table-column prop="nickname" label="昵称" width="180" />
    <el-table-column prop="birthday" label="生日" width="180" />
    <el-table-column prop="avatar" label="头像">
      <template #default="scope">
        <el-image :src="scope.row.avatar"></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="birthplace" label="出生地" />
    <el-table-column prop="introduction" label="个人简介" />
    <el-table-column label="性别">
      <template #default="scope">
        <span>{{ scope.row.sex === 1 ? "男" : "女" }}</span>
      </template>
    </el-table-column>
    <el-table-column label="用户类型">
      <template #default="scope">
        <span>{{ scope.row.type === 1 ? "学员" : "教练" }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          :icon="Delete"
          type="danger"
          size="small"
          @click="delUer(scope.row.id)"
          >删除</el-button
        >
        <el-button
          :icon="Edit"
          type="info"
          size="small"
          @click="edit(scope.row.id)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    style="float: right; margin: 20px"
    @size-change="pageSizeChange"
    @current-change="pageCurrentChange"
    :current-page="pageNum"
    :page-size="pageSize"
    layout=" prev, pager, next"
    :total="totalNum"
    background
  />
  <!-- 新增用户对话框 -->
  <el-dialog v-model="addDialogVisible" title="新增用户" width="400px">
    <el-form :model="addUserForm" label-width="60px" ref="ruleFormRef">
      <el-form-item label="用名" prop="username">
        <el-input
          v-model="addUserForm.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="头像" prop="avatar">
        <el-upload
            class="upload-demo"
            list-type="picture-card"
            name="object"
            action="/api/oss/img"
            accept=".jpg,.png"
            :on-remove="handleRemove"
            :limit="1"
            :on-success="onSuccess"
            :on-change="onChange"
            :file-list="fileList"
        >
          <el-icon><plus /></el-icon>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png 格式，小于500KB,只能上传一张图片
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input
          v-model="addUserForm.nickname"
          placeholder="请输入昵称"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="addUserForm.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="introduction">
        <el-input
          v-model="addUserForm.introduction"
          placeholder="请输入简介"
        ></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="birthplace">
        <el-input
            v-model="addUserForm.birthplace"
            placeholder="请输入简介"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select
          v-model="addUserForm.sex"
          class="m-2"
          placeholder="选择性别"
          style="width: 100%"
        >
          <el-option
            v-for="item in sexOptions"
            :key="item.sex"
            :label="item.name"
            :value="item.sex"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select
          v-model="addUserForm.type"
          class="m-2"
          placeholder="选择类型"
          style="width: 100%"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.sex"
            :label="item.name"
            :value="item.sex"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitUser">确定</el-button>
        <el-button @click="reset">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import commonPageRepository from "@/utils/common-page-repository";
import { Search, Delete, Plus, Edit } from "@element-plus/icons";
import { onMounted, reactive, ref } from "vue";
import {
  userList,
  addUserData,
  delUserData,
  queryUser,
  updateUser,
} from "@/api/user";
import { ElMessage } from "element-plus";
const tableData = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const totalNum = ref();
function getUserList() {
  userList({
    current: pageNum.value,
    size: pageSize.value,
  }).then((res) => {
    tableData.value = res.data.records;
    totalNum.value = res.data.total;
  });
}
const { pageSizeChange, pageCurrentChange } = commonPageRepository(
  pageSize,
  pageNum,
  getUserList
);
// 新增用表单数据
const addDialogVisible = ref(false);
function addUser() {
  userId.value = "";
  addDialogVisible.value = true;
}
const addUserForm = ref({});
const sexOptions = ref([
  {
    name: "男",
    sex: 1,
  },
  {
    name: "女",
    sex: 0,
  },
]);
const typeOptions = ref([
  {
    name: "学员",
    sex: 1,
  },
  {
    name: "教练",
    sex: 0,
  },
]);
const ruleFormRef = ref();
function submitUser() {
  if (!userId.value) {
    addUserData({
      username: addUserForm.value.username,
      nickname: addUserForm.value.nickname,
      sex: addUserForm.value.sex,
      type: addUserForm.value.type,
      password: addUserForm.value.password,
      avatar:addUserForm.value.avatar,
      introduction: addUserForm.value.introduction,
      birthplace:addUserForm.value.birthplace
    }).then((res) => {
      if (res.code === 200) {
        ElMessage.success("添加用户成功");
        ruleFormRef.value.resetFields();
        addDialogVisible.value = false;
        getUserList();
      }
    });
  } else {
    updateUser({
      username: addUserForm.value.username,
      nickname: addUserForm.value.nickname,
      sex: addUserForm.value.sex,
      type: addUserForm.value.type,
      password: addUserForm.value.password,
      id: userId.value,
      avatar:addUserForm.value.avatar,
      introduction: addUserForm.value.introduction,
      birthplace:addUserForm.value.birthplace
    }).then((res) => {
      ElMessage.success("更新信息成功");
      ruleFormRef.value.resetFields();
      addDialogVisible.value = false;
      getUserList();
    });
  }
}
function reset() {
  ruleFormRef.value.resetFields();
  addDialogVisible.value = false;
}
// 删除
function delUer(id) {
  delUserData({
    userIds: id,
  }).then((res) => {
    ElMessage.success("删除成功");
    getUserList();
  });
}
function search() {
  pageNum.value = 1;
  userList({
    username: userForm.userName,
    current: pageNum.value,
    size: pageSize.value,
  }).then((res) => {
    ElMessage.success("查询成功");
    tableData.value = res.data.records;
    totalNum.value = res.data.total;
  });
}
const userId = ref("");

// 编辑用户
function edit(id) {
  userId.value = id;
  addDialogVisible.value = true;
  queryUser(id).then((res) => {
    addUserForm.value = res.data;
  });
}
const ids = ref([]);
const multipleDta = ref([]);
// 多选
const multipleTableRef = ref();
function handleSelectionChange(val) {
  multipleDta.value = val;
}
function multipleDel() {
  if (multipleDta.value.length === 0) {
    ElMessage.warning("请选择删除数据");
  } else {
    multipleDta.value.map((item) => {
      ids.value.push(item.id);
    });
    delUer(ids.value.join(",")).then(() => {
      ElMessage.success("批量删除成功");
      getUserList;
    });
  }
}
onMounted(() => {
  getUserList();
});
const userForm = reactive({});
const fileList=ref([])
function handleRemove(file,files){
  fileList.value=files
}
function onSuccess(file){
  addUserForm.value.avatar=file.data
}
//超出图片限制得回调
function onChange(file,files){
  fileList.value=files
}
</script>

<style lang="scss" scoped></style>
